<template>
	<view class="page">
		<!-- 顶部栏 -->
		<top-bar />
		
		<!-- 内容区 -->
		<view class="content">
			<!-- 左侧热门活动 -->
			<hot-activities />

			<!-- 右侧功能区 -->
			<feature-cards />
		</view>

		<!-- 活动时刻 -->
		<activity-moment />

		<!-- 分类Tab -->
		<view class="category-tabs-wrapper">
			<category-tabs />
		</view>

		<!-- 筛选条件 -->
		<filter-options />

		<!-- 活动卡片 -->
		<activity-card />

		<!-- 底部导航栏 -->
		<bottom-nav />
	</view>
</template>

<script setup>
import TopBar from './components/TopBar.vue';
import HotActivities from './components/HotActivities.vue';
import FeatureCards from './components/FeatureCards.vue';
import ActivityMoment from './components/ActivityMoment.vue';
import CategoryTabs from './components/CategoryTabs.vue';
import FilterOptions from './components/FilterOptions.vue';
import ActivityCard from './components/ActivityCard.vue';
import BottomNav from './components/BottomNav.vue';
</script>

<style>
.page {
	background: #d6f6f8;
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	padding-bottom: 70px;
}

/* 内容区布局 */
.content {
	display: flex;
	margin: 0 10px;
}

/* 分类Tab粘性布局 */
.category-tabs-wrapper {
	position: sticky;
	top: 100px; /* 固定在搜索栏下方，TopBar大约60px高度 */
	z-index: 90; /* 比TopBar的z-index稍低 */
}

/* 基础卡片样式 */
.card {
	/* width: 95vw; 移除固定宽度，让 flex 布局生效 */
}
</style>
